<template>
	<view>
		<uni-nav-bar @clickLeft="$tab.back()" :backgroundColor="navBg" :statusBar="true" :border="false" :fixed="false"
			:color="navTextColor" left-icon="left" title="我的店铺" />
		<view class="header-bg">
			<view class="" :style="{height: stutasHeight + 'px'}" />
			<view class="flex pl-20 mt-32">
				<image class="image-tx" :src="globalConfig.imagePrefix + storeDetail.logo" style="" mode=""></image>
				<view class="flex flex-col justify-between ml-24">
					<view class="t1 u-line-1">{{ storeDetail.name || '暂未查询到店铺' }}</view>
					<view class="box-s flex justify-around items-center px-12" @click="changeState(storeDetail.state)">
						<text>{{ storeDetail.state == 1 ? '营业中' : '休息中' }}</text>
						<u-icon name="arrow-down-fill" color="#FA554E" size="14"></u-icon>
					</view>
				</view>
			</view>
			<view class="box-center">
				<view class="">
					<view class="flex items-center top justify-around">
						<view class="topbox flex items-center justify-around" @click="change_top(index)"
							:class="topIndex == index ? 'top-active' : ''" v-for="(item, index) in topList"
							:key="index">
							<text>{{ item }}</text>
						</view>
					</view>
				</view>
				<view class="flex justify-around">
					<view class="but but-1 mt-48 flex flex-col items-center">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/store/icon_yinyee@2x.png"
							mode=""></image>
						<view class="active mt-16"></view>
						<text class="text1 mt-24">{{ tatal.turnover }}</text>
						<text class="text2 mt-12">营业额</text>
					</view>
					<view class="but but-2 mt-48 flex flex-col items-center">
						<image
							src="https://file.fulewanjia.com/fulewanjia/profile/appImages/store/icon_dindanshuliang@2x.png"
							mode=""></image>
						<view class="active mt-16"></view>
						<text class="text1 mt-24">{{ tatal.orderNum }}</text>
						<text class="text2 mt-12">订单数量</text>
					</view>
					<view class="but but-3 mt-48 flex flex-col items-center">
						<image
							src="https://file.fulewanjia.com/fulewanjia/profile/appImages/store/icon_daifahuodindanshu@2x.png"
							mode=""></image>
						<view class="active mt-16"></view>
						<text class="text1 mt-24">{{ tatal.shippedNum }}</text>
						<text class="text2 mt-12">待发货订单数</text>
					</view>
				</view>
			</view>
		</view>



		<view class="bottom-box" style="margin-top: 280rpx;">
			<view class="box1">
				商家服务
			</view>
			<u-divider></u-divider>
			<view class="text-28 flex items-center justify-between mt-24" @click="bandAli">
				<view class="">
					支付宝
				</view>
				<view class="flex items-center" v-if="userInfo.storeZfbOpenId">
					<view class="">
						{{userInfo.storeZfbNickName}}
					</view>
					<image :src="userInfo.storeZfbAvatar" class="image-40 round ml-12" mode=""></image>
				</view>
				<u-icon name="arrow-right" color="#000" v-else></u-icon>
			</view>
			<u-divider></u-divider>
			<view class="flex justify-between items-center but" @click="routeJump(i.name)" v-for="(i, j) in butList"
				:key="j" v-if="i.show">
				<view class="flex items-center">
					<image :src="i.image" mode=""></image>
					<text class="ml-16">{{ i.name }}</text>
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
			</view>
		</view>
		<u-gap height="50" bgColor=""></u-gap>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				navBg: "transparent",
				navTextColor: "#fff",
				stutasHeight: uni.getSystemInfoSync().statusBarHeight + 44,
				topList: ['今日', '本周', '本月'],
				topIndex: 0,
				storeId: '',
				storeDetail: '',
				tatal: {
					turnover: 0,
					orderNum: 0,
					shippedNum: 0,
				},
				butList: [{
						name: '商品管理',
						image: 'https://file.fulewanjia.com/fulewanjia/profile/appImages/store/icon_shangpinguanli@2x.png',
						show:true
					},
					{
						name: '发布商品',
						image: 'https://file.fulewanjia.com/fulewanjia/profile/appImages/store/icon_shangpinfenlei@2x.png',
						show:true
					},
					{
						name: '订单管理',
						image: 'https://file.fulewanjia.com/fulewanjia/profile/appImages/store/icon_fabushangpin@2x.png',
						show:true
					},
					{
						name: '生成收款码',
						image: 'https://file.fulewanjia.com/fulewanjia/profile/appImages/store/icon_shoukuanerweima.png',
						show:true
					},
					// {
					// 	name: '商家金积分收益',
					// 	image: 'https://file.fulewanjia.com/fulewanjia/profile/appImg/mine/icon_shangjiashoukuanma@2x.png'
					// },
					{
						name: '商家核销',
						image: 'https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_shangjiahexiao@2x.png',
						show:true
					},
					{
						name: '收款码',
						image: 'https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_shangjiashoukuanma.png',
						show:false
					},
					{
						name: '申请分账',
						image: 'https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_shenqingfengzhang.png',
						show:true
					},
					// {
					// 	name: '打赏列表',
					// 	image: 'http://img.kxjb1319.com/shop/icon_dashangliebiao@2x.png'
					// }
				],
				globalConfig: getApp().globalData.config
			}
		},
		onLoad(e) {
			this.$Api.store.appgetstores().then((res) => {
				if (res.data) {
					this.storeDetail = res.data
					if(res.data.shopCode){
						this.butList.forEach((item)=>{
							if(item.name == '收款码'){
								item.show = true
							}
						})
					}
					if(res.data.subMchId){
						this.butList.forEach((item)=>{
							if(item.name == '申请分账'){
								item.show = true
							}
						})
					}
					this.storeId = res.data.id
					this.statistics(this.topIndex)
				} else {
					this.storeDetail = ''
				}
			})
		},
		onShow() {
			// #ifdef APP
			let args = plus.runtime.arguments;
			if (args.split("=")[1]) {
				plus.runtime.arguments = null;
				var authCode = args.split("=")[1];
				this.$Api.index.zfbStoreAccount({
					code: authCode
				}).then(bandAli => {
					this.$store.dispatch('GetInfo')
				})
			}
			// #endif
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo
			},
		},
		onPageScroll(e) {
			if (e.scrollTop >= 30) {
				this.navBg = '#FF561D'
				this.navTextColor = '#fff'
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#FF561D',
				})
			} else {
				this.navBg = 'transparent'
				this.navTextColor = '#fff'
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#FF561D',
				})
			}
		},
		methods: {
			bandAli() {
				let that = this
				// #ifdef APP
				let backUrl = 'https://d.fulewanjia.com/aliLogin.html';
				let aplipayAuthUrl = 'https://openauth.alipay.com/oauth2/publicAppAuthorize.htm'; //授权地址，可前端写死，也可后端返回
				let appid = '2021004138648121'; //商户的APPID 
				let url = aplipayAuthUrl + '?app_id=' + appid + '&scope=auth_user&redirect_uri=' + backUrl
				url = encodeURIComponent(url);

				plus.runtime.openURL(
					'alipays://platformapi/startapp?appId=20000067&url=' + url, //这里的appId=20000067是固定的，不需要改
					res => {
						//这里写打开URL地址失败后的处理
						uni.showToast({
							title: '请先安装支付宝!',
							icon: "none"
						})
					},
					'com.eg.android.AlipayGphone'
				);
				// #endif
			},
			change_top(index) {
				this.topIndex = index
				this.statistics(index)
			},
			statistics(index) {
				this.$Api.store.storesStatistics({
					dateType: (index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 0)
				}).then((res) => {
					this.tatal = res
				})
			},
			changeState(state) {
				if (!this.storeDetail) {
					return false
				}
				this.$Api.store.appeditstores({
					id: this.storeId,
					state: state == 0 ? 1 : 0
				}).then((res) => {
					this.storeDetail.state = state == 0 ? 1 : 0
					uni.$u.toast('切换成功')
				})
			},
			routeJump(name) {
				switch (name) {
					case '发布商品':
						this.$tab.nav(`/pages/mine/store/publish?storeId=${this.storeId}`)
						break
					case '商品管理':
						this.$tab.nav(`/pages/mine/store/commodityManagement?storeId=${this.storeId}`)
						break
					case '订单管理':
						this.$tab.nav(`/pages/mine/store/order?storeId=${this.storeId}`)
						break
					case '生成收款码':
						this.$tab.nav(`/pages/mine/store/createQrcode`)
						break
					case '商家收款码':
						this.$tab.nav(`/pages/mine/store/code?storeId=${this.storeId}`)
						break
					case '打赏列表':
						this.$tab.nav(`/pages/mine/store/rewardList`)
						break
					case '收款码':
						uni.previewImage({
							urls:[this.storeDetail.shopCode]
						})
						// this.$tab.nav(`/pages/mine/store/reward`)
						break
					case '申请分账':
						this.$Api.index.shenqingfenzhang().then((res)=>{
							plus.runtime.openURL(res.data);
						})
						break
					case '商家核销':
						uni.scanCode({
							autoZoom: false,
							success: (res) => {
								this.$tab.nav(`/pages/mine/order/orderDetail?id=${res.result}&store=true`)
							}
						});
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.header-bg {
		width: 100%;
		height: 560rpx;
		background: linear-gradient(180deg, #FF561D 71%, #FF0064 100%);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		position: relative;
	}

	.box-1 {
		width: 100%;
		padding: 0 20rpx;

	}

	.image-tx {
		width: 112rpx !important;
		height: 112rpx !important;
		border-radius: 50% !important;
	}

	.t1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.box-s {
		width: 144rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 26rpx;

		text {
			font-size: 28rpx;
			font-weight: 400;
			color: #FA554E;
		}
	}

	.box-center {
		margin: 48rpx 20rpx 0 20rpx;
		padding: 48rpx 0rpx 24rpx 0rpx;
		height: 412rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 20rpx 0px rgba(153, 153, 153, 0.16);
		border-radius: 12rpx;

		.top {
			border: 2rpx solid #FA554E;
			margin: 0 116rpx !important;
			height: 72rpx;
			border-radius: 8rpx;
		}

		.topbox {
			width: 160rpx;
			color: #FA554E;
		}

		.top-active {
			width: 160rpx;
			height: 72rpx;
			color: #FFFFFF;
			background: #FE6B39;
			border-radius: 8rpx;
			// transition: 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
		}

		.but {
			width: 200rpx;
			height: 220rpx;

			border-radius: 16rpx;
			padding: 16rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			.active {
				width: 24rpx;
				height: 4rpx;
			}

			.text1 {
				font-size: 40rpx;
				font-weight: 400;
				color: #333333;
			}

			.text2 {
				font-size: 24rpx;
				font-weight: 400;
				color: #999;
			}
		}

		.but-1 {
			background: #FFE9E7;

			.active {
				background: #FF5E4F;
			}
		}

		.but-2 {
			background: #E4E8FF;

			.active {
				background: #7388FF;
			}
		}

		.but-3 {
			background: #FFF4E0;

			.active {
				background: #FFC55B;
			}
		}

	}

	.bottom-box {
		padding: 0 24rpx;

		.box1 {
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			line-height: 32rpx;
		}

		.but {
			padding: 48rpx 0;
			border-bottom: 2rpx solid #EAEAEA;
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}

		text {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 28rpx;
		}
	}
</style>